<template>
	<view class="content" @touchstart="touchStart" @touchend="touchEnd">
		<view v-for="(pro, index) in commerces" :key="pro.id" class="project-list" :class="{ 'project-list-last': index === commerces.length - 1 }" @click="goDetail(pro.id)">
			<view class="project-list-title">
				<text>{{ pro.lead_name }}</text>
				<text>{{ pro.crm_state }}</text>
			</view>
			<view class="project-list-time">
				<text>创建时间</text>
				<text>{{ pro.create_date }}</text>
			</view>
			<view class="dash-line"></view>
			<view class="project-manager-info">
				<text class="project-manager-mark">{{ pro.customer_name !== null ? pro.customer_name : '姓' }}</text>
				<view class="project-manager-name">
					<text>{{ pro.customer_name }}</text>
					<text>目标客户</text>
				</view>
				<text class="project-manager-customer">{{ pro.customer_mobile }}</text>
			</view>
		</view>
		<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
		<!-- #ifdef APP-PLUS -->
		<uni-fab
			uniIcon="search"
			:pattern="pattern"
			:content="content"
			:showIcon="false"
			:horizontal="horizontal"
			:vertical="vertical"
			@trigger="trigger"
			@longpress="fadlongpress"
			@onlyOne="showStatePicker"
		></uni-fab>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<uni-fab
			uniIcon="more"
			:pattern="pattern"
			:content="content"
			:showIcon="false"
			:horizontal="horizontal"
			:vertical="vertical"
			@trigger="trigger"
			@longpress="fadlongpress"
			@onlyOne="showStatePicker"
		></uni-fab>
		<!-- #endif -->
		<mpvue-picker ref="mpvuePickerStateRef" :deepLength="1" :pickerValueDefault="pickerValueDefault" @onConfirm="onStateConfirm" :pickerValueArray="commercialState"></mpvue-picker>
	</view>
</template>

<script>
import { commercestate, commercialState } from '@/common/stateData.js';
export default {
	data() {
		return {
			dataParams: {
				searce_key: '',
				state: '',
				page_no: 1,
				page_size: 10
			},
			commerces: [],
			loadingType: 0,
			contentText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			startPageX: 0,
			startPageY: 0,
			commercestate: commercestate,
			searchLabel: '搜索',
			commercialState: [
				{
					label: '全部',
					value: ''
				},
				...commercialState
			],
			pickerValueDefault: [0],
			pattern: {
				color: '#7A7E83',
				backgroundColor: '#fff',
				selectedColor: '#007AFF',
				buttonColor: '#008ff3'
			},
			content: [
				{
					// iconPath: '/static/component.png',
					// selectedIconPath: '/static/componentHL.png',
					text: '搜索',
					active: false
				},
				// #ifdef MP-WEIXIN
				{
					text: '新增',
					active: false
				}
				// #endif
			],
			horizontal: 'left',
			vertical: 'bottom'
		};
	},
	onLoad() {
		this.getCommerceList();
		this.$eventBus.$on('commercialOpportunitySendExecute', () => {
			this.getCommerceList();
		});
	},
	onReachBottom() {
		if (this.loadingType !== 0) {
			return;
		}
		this.dataParams.page_no++;
		this.loadingType = 1;
		uni.request({
			url: this.$store.state.baseUrl + '/lwj/get_app_crm_list',
			method: 'POST',
			header: {
				token: this.$store.state.token
			},
			data: this.dataParams,
			success: res => {
				this.commerces.push(...res.data.data.list);
				if (res.data.data.list.length < this.dataParams.page_size) {
					this.loadingType = 2;
				} else {
					this.loadingType = 0;
				}
			},
			fail: () => {},
			complete: () => {}
		});
	},

	onNavigationBarButtonTap() {
		uni.navigateTo({
			url: './commercialOpportunityUpdate?isAdd=' + true,
			success: res => {},
			fail: () => {},
			complete: () => {}
		});
	},
	methods: {
		fadlongpress() {
			// 悬浮按钮长按
			if (this.vertical === 'top') {
				this.vertical = 'bottom';
			} else {
				this.vertical = 'top';
			}
		},
		trigger(e) {
			// 悬浮按钮中的选项
			for (let index in this.content) {
				this.content[index].active = index == e.index;
			}
			if (e.index === 0) {
				// 显示 状态 选项底部浮窗
				this.showStatePicker();
			} else {
				uni.navigateTo({
					url: './commercialOpportunityUpdate?isAdd=' + true,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		// 状态
		showStatePicker() {
			this.pickerValueDefault = [0];
			this.$refs.mpvuePickerStateRef.show();
		},
		onStateConfirm(e) {
			this.dataParams.state = e.value[0];
			this.searchLabel = e.label;
			this.dataParams.page_no = 1;
			this.getCommerceList();
		},
		// 左右滑动
		touchStart(event) {
			this.startPageX = event.pageX;
			this.startPageY = event.pageY;
		},
		touchEnd(event) {
			if (event.mp.changedTouches[0].pageX - this.startPageX > 60 && this.startPageY - event.mp.changedTouches[0].pageY < 5) {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		// 获取列表
		getCommerceList() {
			uni.showLoading({
				title: '',
				mask: false
			});
			this.$request({
				url: this.$store.state.baseUrl + '/lwj/get_app_crm_list',
				method: 'POST',
				header: {
					token: this.$store.state.token
				},
				data: this.dataParams,
				success: res => {
					this.commerces = res.data.data.list;
					if (res.data.data.list.length < this.dataParams.page_size) {
						this.loadingType = 2;
					} else {
						this.loadingType = 0;
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		goDetail(id) {
			uni.navigateTo({
				url: './commercialOpportunityUpdate?id=' + id,
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		}
	}
};
</script>

<style>
.content {
	padding-top: 0;
}

.commercial-search {
	margin: 20upx 10upx 0 10upx;
	padding: 10upx 40upx;
	background-color: #ffffff;
	border-radius: 30upx;
	color: #999999;
}

.project-list {
	background-color: #ffffff;
	border-radius: 20upx;
	padding: 30upx;
	margin-top: 15upx;
}

.project-list-last {
	margin-bottom: 30upx;
}

.dash-line {
	margin: 40upx -20upx 20upx;
	border-top: 2upx dashed #eeeeee;
}

.project-manager-mark {
	display: inline-block;
	width: 70upx;
	height: 70upx;
	line-height: 70upx;
	background-color: #008ff3;
	border-radius: 50%;
	text-align: center;
	font-size: 40upx;
	color: #ffffff;
	overflow: hidden;
}

.project-manager-name {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-left: 20upx;
}

.project-manager-name text:nth-child(1) {
	font-size: 30upx;
	font-weight: bold;
}

.project-manager-name text:nth-child(2) {
	color: #999999;
	font-size: 24upx;
}

.project-manager-info {
	display: flex;
	align-items: center;
}

.project-manager-customer {
	line-height: 40upx;
	height: 40upx;
	padding: 6upx 20upx;
	background-color: #f4f4f4;
	border-radius: 6upx;
	color: #999999;
}

.project-list-title,
.project-list-time {
	display: flex;
	justify-content: space-between;
}

.project-list-time {
	color: #999999;
}

.project-list-title {
	margin-bottom: 10upx;
}

.project-list-title text:nth-child(1) {
	max-width: 470upx;
	word-wrap: break-word;
	word-break: normal;
	font-size: 40upx;
}

.project-list-title text:nth-child(2) {
	font-size: 30upx;
	color: #fe3b35;
	height: 40upx;
	line-height: 40upx;
	background-color: #feeeee;
	align-self: center;
	padding: 6upx 20upx;
	border-radius: 6upx;
	white-space:nowrap;
}
</style>
